<template>
  <div class="container">
    <div class="left">
      <aside :class="collapsed?'menu-collapsed':'menu-expanded'">
        <a href="/"><img src="@/assets/logo.png" alt="" :class="collapsed?'menu-collapsed':'menu-expanded'"></a>
          <!--导航菜单-->
        <el-menu
          background-color="#fff"
          text-color="#8C8C8C"
          active-text-color="#0069A8"
          v-bind:style=" collapsed ? {} : { 'width': '300px' } "
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          unique-opened
          router
          v-show="!collapsed"
        >
          <template v-for="(item,index) in menuData">
            <el-submenu :key="index" :index="index+'-'">
              <template slot="title">
                <i :class="item.iconCls" style="color:#8C8C8C;"></i> {{item.name}}
              </template>
              <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path">
                {{child.name}}
              </el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
        <!--导航菜单-折叠后-->
        <ul class="el-menu el-menu-vertical-demo collapsed el-menu-collapsed" v-show="collapsed" ref="menuCollapsed">
            <li v-for="(item,index) in menuData" class="el-submenu item" :key="index">
              <template>
                  <!--显示menu图标-->
                <div class="el-submenu__title" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
                  <i :class="item.iconCls"></i>
                </div>
                <!--鼠标进入/移动 显示/隐藏 当前menu-->
                <ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)" ref="colSubMenu">
                  <li
                    v-for="child in item.children"
                    :key="child.path"
                    class="el-menu-item"
                    style="color: #fff;"
                    :class="$route.path==child.path?'is-active':''"
                    @click="handleSubmenu(child.path)">
                    {{child.name}}
                  </li>
                </ul>
              </template>
            </li>
        </ul>
      </aside>
    </div>
    <div class="right" :style=" collapsed ? {'margin-left': '60px'} : {'margin-left': '300px'} ">
      <div class="head-nav">
        <div class="flexible">
          <span class="trigger" @click.prevent="collapse"><i class="el-icon-fa fa-bars" style="color:#8C8C8C;"></i></span>
        </div>
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-fa fa-user"></i> 欢迎，xxx <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item disabled>修改密码</el-dropdown-item>
            <el-dropdown-item divided @click.native="loginOut()">安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!--右侧主体部分-->
        <section>
          <el-col :span="24" class="breadcrumb-container">
            <strong class="title">{{$route.name}}</strong>
            <el-breadcrumb separator="/" class="breadcrumb-inner">
              <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
                  {{ item.name }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <el-col :span="24" class="content-wrapper">
            <transition name="fade" mode="out-in">
              <router-view></router-view>
            </transition>
          </el-col>
        </section>
        <div class="footer-container">© 2019 - XZ无忧亦无惧</div>
      </div>
    </div>
  </div>
</template>

<script>
let data = () => {
  return {
    menuData: [],
    collapsed: false
  }
}

let initMenu = function () {
  let routers = this.$router.options.routes
  for (let i = 0; i < routers.length; i++) {
    if (routers[i].hidden) {
      continue
    }
    this.menuData.push(routers[i])
  }
}
export default {
  data,
  methods: {
    initMenu,
    collapse: function () {
      this.collapsed = !this.collapsed
    },
    showMenu: function (i, status) {
      this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none'
    },
    handleSubmenu (path) {
      this.$router.push(path)
      this.$refs.colSubMenu[0].style.display = 'none'
    },
    loginOut () {
      this.$router.push({path: '/login'})
    }
  },
  mounted () {
    this.initMenu()
  }
}
</script>
